
<!DOCTYPE html>
<html>
    <head>
        <title>warnTip Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="robots" content="nofollow,noindex" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="warnTip-1.0.js"></script>
        <script type="text/javascript">
            $(window).bind('load',function(){
                    $("#full").click(function(){
						$(this).warnTip({
							'title' : 'This is a sample title',
							'message' : 'This is a sample message. Click on the title to close.'
						});
					});
					$("#title").click(function(){
						$(this).warnTip({
							'title' : 'Click this title to close'
						});
					});
					$("#message").click(function(){
						$(this).warnTip({
							'message' : 'This is a sample message.<br/>Click this mesage to close'
						});
					});
					$("#modify").focusout(function(){
						$(this).warnTip({
							'title' : 'This is what you typed',
							'message' : $(this).val()
						});
					});
					$("#far").click(function(){
						$(this).warnTip({
							'title'		: 'TOO MUCH GAP!',
							'message' 	: 'Hi there',
							'gap'		: 200
						});
					});	
					$("#slow").click(function(){
						$(this).warnTip({
							'title'		: 'SLLLLLLLLLOOOOOOOOOOOOOOOOOWWWWWWWWWWWWW',
							'message' 	: 'Hi there',
							'fadeOutTime' : 2000,
							'fadeInTime' : 2000,
						});
					});						
                
            });
        </script>
		<link rel='stylesheet' href="warnTip-1.0.css" type="text/css" />
        <style type="text/css">
			input{
				border: 1px solid #ccc;
				padding: 5px;
				font-family: verdana, arial, sans-serif;
				color: #333;
			}
		</style>
    </head>
    <body>
        <div id="main">
			<div style="height:50px;"></div>
			<p>
				   <input type='text' style="width:500px" id="full" value="warnTip" />
			</p>
			<p>
				   <input type='text' style="width:500px" id="title" value="warnTip with title only" />
			</p>
			<p>
				   <input type='text' style="width:500px" id="message" value="warnTip with message only" />
			</p>
			<p>
				   <input type='text' style="width:500px" id="modify" value="Modify me then loose focus to show warnTip" />
			</p>
			<p>
				   <input type='text' style="width:500px" id="far" value="Why is warnTip very far?" />
			</p>
			<p>
				   <input type='text' style="width:500px" id="slow" value="Why is fade too slow?" />
			</p>
        </div>
    </body>
</html>
